import { Camera } from '@capacitor/camera';
import { SplashScreen } from '@capacitor/splash-screen';
import { jwtPlugin,FTPFileEnum } from 'capacitor-plugin-tjyjwt';


window.customElements.define(
    'capacitor-welcome',
    class extends HTMLElement {
        constructor() {
            super();

            SplashScreen.hide();

            const root = this.attachShadow({ mode: 'open' });

            root.innerHTML = `
    <style>
      :host {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        display: block;
        width: 100%;
        height: 100%;
      }
      h1, h2, h3, h4, h5 {
        text-transform: uppercase;
      }
      .button {
        display: inline-block;
        padding: 10px;
        background-color: #73B5F6;
        color: #fff;
        font-size: 0.9em;
        border: 0;
        border-radius: 3px;
        text-decoration: none;
        cursor: pointer;
      }
      main {
        padding: 15px;
      }
      main hr { height: 1px; background-color: #eee; border: 0; }
      main h1 {
        font-size: 1.4em;
        text-transform: uppercase;
        letter-spacing: 1px;
      }
      main h2 {
        font-size: 1.1em;
      }
      main h3 {
        font-size: 0.9em;
      }
      main p {
        color: #333;
      }
      main pre {
        white-space: pre-line;
      }
    </style>
    <div>
      <capacitor-welcome-titlebar>
        <h1>Capacitor插件demo</h1>
      </capacitor-welcome-titlebar>
      <main>
        <p>
          验证执法仪的各种方法
        </p>
  
        <p>
          <button class="button" id="take-photo">打开camera，测试如何调用摄像头插件</button>
        </p>
        <p>
          <button class="button" id="openConnection">打开热点链接，测试如何调用热点链接插件</button>
          <button class="button" id="takephoto">拍照</button>
          <button class="button" id="takevideo">录像</button>
          <button class="button" id="stopvideo">停止录像</button>
          <button class="button" id="listener">监听数据</button>
          <button class="button" id="picture">获取图片</button>
          <button class="button" id="video">获取视频</button>
          <button class="button" id="download">下载文件</button>
          <div class="text" id="text">这里是文本</div>
        </p>

      
        <p>
          <img id="image" style="max-width: 100%">
        </p>
      </main>
    </div>
    `;
        }

        connectedCallback() {
            const self = this;

            self.shadowRoot.querySelector('#take-photo').addEventListener('click', async function(e) {
                try {
                    const photo = await Camera.getPhoto({
                        resultType: 'uri',
                    });

                    const image = self.shadowRoot.querySelector('#image');
                    if (!image) {
                        return;
                    }

                    image.src = photo.webPath;
                } catch (e) {
                    console.warn('User cancelled', e);
                }
            });

            self.shadowRoot.querySelector('#openConnection').addEventListener('click', async function (e) {
              try {
                // alert('在这里调用capacitor插件')
                const mapResponse = await jwtPlugin.connect({ message: 'connect' })
                // const textDiv = self.shadowRoot.querySelector('#text');
      
                // // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
                // // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
                // textDiv.innerText =`Map Response:  ${mapResponse.value} \nEcho Response: ${mapResponse}`;
      
              } catch (e) {
                console.warn('User cancelled', e);
              }
            });
      
            self.shadowRoot.querySelector('#takephoto').addEventListener('click', async function (e) {
              try {
                // const mapResponse = await jwtPlugin.snap({ message: 'snap' })
                const mapResponse = await jwtPlugin.playRTSP({ message: 'snap' })

                const formattedJsonString = JSON.stringify(mapResponse, null, 2);
                // const echoResponse = await jwtPlugin.echo({ message: 'hello world' })
                // 获取ID为text的div元素
                const textDiv = self.shadowRoot.querySelector('#text');
      
                // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
                // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
                textDiv.innerText =`Map Response:  ${mapResponse.value} \nEcho Response: ${formattedJsonString
                }`;
      
              } catch (e) {
                console.warn('User cancelled', e);
              }
            });

            self.shadowRoot.querySelector('#takevideo').addEventListener('click', async function (e) {
              try {
                const mapResponse = await jwtPlugin.record({ starting: true })
                const formattedJsonString = JSON.stringify(mapResponse, null, 2);
                // const echoResponse = await jwtPlugin.echo({ message: 'hello world' })
                // 获取ID为text的div元素
                const textDiv = self.shadowRoot.querySelector('#text');
      
                // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
                // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
                textDiv.innerText =`Map Response:  ${mapResponse.value} \nEcho Response: ${formattedJsonString
                }`;
      
              } catch (e) {
                console.warn('User cancelled', e);
              }
            });
            
            self.shadowRoot.querySelector('#stopvideo').addEventListener('click', async function (e) {
            
              try {
                const mapResponse = await jwtPlugin.record({ starting: false })
                const formattedJsonString = JSON.stringify(mapResponse, null, 2);
                // const echoResponse = await jwtPlugin.echo({ message: 'hello world' })
                // 获取ID为text的div元素
                const textDiv = self.shadowRoot.querySelector('#text');
      
                // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
                // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
                textDiv.innerText =`Map Response:  ${mapResponse.value} \nEcho Response: ${formattedJsonString
                }`;
      
              } catch (e) {
                console.warn('User cancelled', e);
              }
            });

            self.shadowRoot.querySelector('#listener').addEventListener('click', async function (e) {
              // VlcPlayer.stream({ link: 'rtsp://192.168.195.144:5554/live' });

              const mapResponse2 = await jwtPlugin.setParameters({ params: '{"DevId":"DSJ-YDTK3A10003420","Fbutton":0,"FtpHttpPort":80,"FtpIp":"192.168.11.144","FtpPort":2221,"FtpPwd":"ftp","FtpUser":"ftp","IndicatorLight":1,"InfraredAuto":0,"LocationFreq":10,"NetTransBit":"AUTO","NetTransRes":4,"PlaybackPwd":"000000","PostRec":7,"PreRec":1,"ServerIP":"183.56.179.142","ServerPort":5070,"SnapRes":0,"SnapShot":0,"SnapShotTime":0,"Type":"2","User":"K303420","VidPtime":0,"VideoQuality":0,"VideoRes":3}' })
          

              const textDiv = self.shadowRoot.querySelector('#text');
      
              // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
              // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
              textDiv.innerText =`Map Response:  ${mapResponse} \nEcho Response: ${mapResponse2}`;
              // jwtPlugin.addListener('onParamsListener', (data) => {
              //   // console.log('Message received from plugin:', data);
              //   alert(data.zfyParames)
              // });

              // jwtPlugin.stopConnecting({ message: 'stopConnecting' });
            });

            self.shadowRoot.querySelector('#picture').addEventListener('click', async function (e) {
              const mapResponse = await   jwtPlugin.ftpListFiles({ type: FTPFileEnum.PICTURE })

              const formattedJsonString = JSON.stringify(mapResponse, null, 2);
              // const echoResponse = await jwtPlugin.echo({ message: 'hello world' })
              // 获取ID为text的div元素
              const textDiv = self.shadowRoot.querySelector('#text');
    
              // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
              // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
              textDiv.innerText =`Map Response:  ${mapResponse.value} \nEcho Response: ${formattedJsonString
              }`;
            });


            self.shadowRoot.querySelector('#video').addEventListener('click', async function (e) {
              const response = await   jwtPlugin.ftpListFiles({ type: FTPFileEnum.VIDEO })
              const formattedJsonString = JSON.stringify(response, null, 2);
              // const echoResponse = await jwtPlugin.echo({ message: 'hello world' })
              // 获取ID为text的div元素
              const textDiv = self.shadowRoot.querySelector('#text');
    
              // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
              // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
              textDiv.innerText =`Map Response:  ${formattedJsonString} `;
            });


            self.shadowRoot.querySelector('#download').addEventListener('click', async function (e) {
              const response = await jwtPlugin.stopRTSP({ message: 'stopRTSP' })
              // const response = await   jwtPlugin.ftpRetrieveFile({fileName:'20231206144333-00N.JPG',ftpFilePath:'/PICTURE/20231206144333-00N.JPG' })
              const formattedJsonString = JSON.stringify(response, null, 2);
              // const echoResponse = await jwtPlugin.echo({ message: 'hello world' })
              // 获取ID为text的div元素
              const textDiv = self.shadowRoot.querySelector('#text');
    
              // 更新div的内容。根据返回数据的结构，您可能需要调整下面的代码
              // textDiv.innerText = `Map Response: ${mapResponse}\nEcho Response: ${echoResponse}`;
              textDiv.innerText =`Map Response:  ${formattedJsonString} `;
            });
        }
    }
);

window.customElements.define(
    'capacitor-welcome-titlebar',
    class extends HTMLElement {
        constructor() {
            super();
            const root = this.attachShadow({ mode: 'open' });
            root.innerHTML = `
    <style>
      :host {
        position: relative;
        display: block;
        padding: 15px 15px 15px 15px;
        text-align: center;
        background-color: #73B5F6;
      }
      ::slotted(h1) {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-size: 0.9em;
        font-weight: 600;
        color: #fff;
      }
    </style>
    <slot></slot>
    `;
        }
    }
);